import * as API from '@/services';
import {
  DEFAULT_FORM_FLEX_LAYOUT,
  DEFAULT_FORM_LAYOUT,
  KfBackendEnumPicker,
  KfBizQuickFormProps,
  KfFloatingContextProps,
  KfInput,
  KfInputNumber,
  KfQuickForm,
  KfRadioGroup,
  KfRichEditor,
  KfTextArea,
} from 'kf-web-library';
import { Col, Form, Radio, Row } from 'antd';
import React, { FunctionComponent } from 'react';
import KfMaterialUpload from '@/components/KfMaterialUpload';
import HxJournalPicker from '@/components/HxJournalPicker';

const FormItem = Form.Item;
type QueryEntity = API.News;
type CreateEntity = API.News_Create;
type ModifyEntity = API.News_Modify;

type DataFormProps = {} & KfBizQuickFormProps & KfFloatingContextProps;

/**
 * 轮播/广告管理 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { formType, bizId, ...rest } = props;

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        labelCol: {
          flex: '0 0 80px',
        },
        wrapperCol: {
          flex: '1',
        },
        initialValues: {
          jtype: '1',
        },
      }}
      defaultQueryRequest={() =>
        API.queryNews(bizId!).then((resp) => {
          if (resp.flag) {
            let jtype = '3';
            if (!!resp.data?.link) {
              jtype = '1';
            } else if (!!resp.data?.video) {
              jtype = '2';
            }
            resp.data = {
              ...resp.data,
              jtype,
            } as any;
          }
          return new Promise((resolve) => resolve(resp));
        })
      }
      submitRequest={{
        create: (formValues) =>
          API.createNews({
            ...formValues,
          } as CreateEntity),
        modify: (formValues) =>
          API.modifyNews({
            ...formValues,
            id: bizId,
          } as ModifyEntity),
      }}
      {...rest}
    >
      <Row>
        <Col span={16}>
          <FormItem name={nameof<ModifyEntity>((x) => x.title)} label="名称" rules={[{ required: true, max: 200 }]}>
            <KfInput />
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem name={nameof<ModifyEntity>((x) => x.orderNum)} label="排序号" rules={[{ required: false }]}>
            <KfInputNumber />
          </FormItem>
        </Col>
      </Row>

      <FormItem name={nameof<ModifyEntity>((x) => x.type)} label="资讯类型" rules={[{ required: true }]}>
        <KfBackendEnumPicker.RadioGroup enumType={'NewsType'} exclude={['HOME_CAROUSEL']} />
      </FormItem>

      <FormItem name={nameof<ModifyEntity>((x) => x.journalId)} label="所属期刊" rules={[{ required: false }]}>
        <HxJournalPicker.TableSelect />
      </FormItem>

      <FormItem name={nameof<ModifyEntity>((x) => x.abstractContent)} label="摘要" rules={[{ required: true }]}>
        <KfTextArea />
      </FormItem>

      <FormItem name={nameof<ModifyEntity>((x) => x.img)} label="封面" rules={[{ required: true }]}>
        <KfMaterialUpload.Avatar materialType={'IMG'} />
      </FormItem>
      <FormItem name={'jtype'} label="跳转方式" rules={[{ required: true }]}>
        <KfRadioGroup
          options={[
            { label: '跳转链接', value: '1' },
            { label: '视频', value: '2' },
            { label: '图文', value: '3' },
          ]}
        />
      </FormItem>
      <FormItem noStyle={true} shouldUpdate={true}>
        {(form) => {
          const jtype = form.getFieldValue('jtype');
          if (jtype === '1') {
            return (
              <FormItem name={nameof<ModifyEntity>((x) => x.link)} label="链接" rules={[{ required: true }]}>
                <KfInput />
              </FormItem>
            );
          } else if (jtype === '2') {
            return (
              <>
                <FormItem name={nameof<ModifyEntity>((x) => x.video)} label="视频" rules={[{ required: false }]}>
                  <KfMaterialUpload.Avatar materialType={'VIDEO'} />
                </FormItem>
              </>
            );
          } else {
            return (
              <>
                <FormItem name={nameof<ModifyEntity>((x) => x.content)} label="内容" rules={[{ required: false }]}>
                  <KfRichEditor />
                </FormItem>
              </>
            );
          }
        }}
      </FormItem>
    </KfQuickForm>
  );
};

export default QuickForm;
